<template>
	<view>
		<!-- 用户信息 -->
		<view class="user_info" >
			<view class="user_icon">
				<image :src="imgDetail.user.avatar" mode="widthFix"></image>
			</view>
			<view class="user_desc">
				<view class="user_name">{{imgDetail.user.name}}</view>
				<view class="user_time">{{imgDetail.cnTime}}</view>
			</view>
		</view>
		<!-- 高清大图 -->
		<view class="high_img">
			<swiperAction @swiperAction='handleSwiperAction'>
			<image :src="imgDetail.thumb" mode="widthFix"></image>
			</swiperAction>
		</view>
		<!-- 点赞 -->
		<view class="user_rank">
			<view class="rank">
				<text class="iconfont icon-dianzan">{{imgDetail.rank}}</text>
			</view>
			<view class="user_collect">
				<text class="iconfont icon-shoucang">收藏</text>
			</view>
		</view>
		<!-- 专辑 -->
		<view class="album_wrap" v-if="album.length">
			<!-- 标题 -->
			<view class="album_title">相关</view>
			<!-- 内容 -->
			<view class="album_list">
				<view class="album_item" v-for="item in album" :key='item.id'>
					<view class="album_cover">
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
					<view class="album_info">
						<view class="album_info_text">专辑</view>
						<view class="album_name">{{item.name}}</view>
						<text class="iconfont icon-right"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 最热评论 -->
		<view class="comment hot" v-if="hot.length">
			<view class="comment_title">
				<text class="iconfont icon-hot"></text>
				<text class="comment_text">最热评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="item in hot" :key='item.id'>
					<!-- 用户信息 -->
					<view class="comment_user">
						<!-- 用户头像 -->
						<view class="user_icon">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<!-- 用户名称 -->
						<view class="user_name">
							<view class="user_nickname">{{item.user.name}}</view>
							<view class="user_time">{{item.cnTime}}</view>
						</view>
						<!-- 用户徽章 -->
						<view class="user_badge">
							<image mode="" v-for="item2 in item.user.title" :key='item2.icon' :src="item2.icon"></image>
						</view>
					</view>
					<!-- 评论数据 -->
					<view class="comment_desc">
						<view class="comment_content">{{item.content}}</view>
						<view class="comment_like">
							<text class="iconfont icon-dianzan">{{item.size}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 最新 -->
	<view class="comment new" v-if="comment.length">
		<view class="comment_title">
			<text class="iconfont icon-icon-pinglun"></text>
			<text class="comment_text">最新评论</text>
		</view>
		<view class="comment_list">
			<view class="comment_item" v-for="item in comment" :key='item.id'>
				<!-- 用户信息 -->
				<view class="comment_user">
					<!-- 用户头像 -->
					<view class="user_icon">
						<image :src="item.user.avatar" mode="widthFix"></image>
					</view>
					<!-- 用户名称 -->
					<view class="user_name">
						<view class="user_nickname">{{item.user.name}}</view>
						<view class="user_time">{{item.cnTime}}</view>
					</view>
					<!-- 用户徽章 -->
					<view class="user_badge">
						<image mode="" v-for="item2 in item.user.title" :key='item2.icon' :src="item2.icon"></image>
					</view>
				</view>
				<!-- 评论数据 -->
				<view class="comment_desc">
					<view class="comment_content">{{item.content}}</view>
					<view class="comment_like">
						<text class="iconfont icon-dianzan">{{item.size}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
		<!-- 下载图片 -->
		<view class="download">
			<view class="download_btn" @click="handleDownload">下载图片</view>
		</view>
	</view>
</template>

<script>
	import swiperAction from '@/components/swiperAction.vue'
	import moment from 'moment'
	// 设置moment语言为中文
	moment.locale('zh-cn')
	export default {
		data() {
			return {
				// 图片信息
				imgDetail: {},
				//专辑数据
				album: [],
				// hot评论
				hot: [],
				//最新评论
				comment: [],
				//图片索引
				imgIndex: 0
			}
		},
		components: {
			swiperAction
		},
		onLoad() {
			// console.log(getApp().globalData)
			const { imgIndex } = getApp().globalData
			this.imgIndex = imgIndex
			this.getData()
		},
		methods: {	
			//页面赋值
			getData() {
				const { imgList } = getApp().globalData
				this.imgDetail = imgList[this.imgIndex]
				// 格式化年龄
				this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow()
				this.getCommends(this.imgDetail.id)
			},
			async getCommends(id) {
				const result = await this.request({
					url: `http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment`
				})
				this.album = result.res.album
				// 添加时间属性，格式化
				result.res.hot.forEach(item => item.cnTime = moment(item.atime*1000).fromNow())
				result.res.comment.forEach(item => item.cnTime = moment(item.atime*1000).fromNow())
				this.hot = result.res.hot
				this.comment = result.res.comment
			},
			//滑动事件
			handleSwiperAction(e) {
					const { imgList } = getApp().globalData
				//判断传进的方向 左滑index++ 右滑index--，数组越界问题
				if(e.direction === "left" && this.imgIndex < imgList.length -1) {
					this.imgIndex++;
					this.getData()
				}else if(e.direction === "right" && this.imgIndex > 0) {
					this.imgIndex--;
					this.getData()
				}else {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
			},
			// 点击下载图片
		async	handleDownload() {
			await uni.showLoading({
				title: '下载中'
			})
				//将远程文件下载到小程序内存中
		const result1 =	await	uni.downloadFile({url: this.imgDetail.img})

		const {tempFilePath} = result1[1]
	
			//从内存中拿取临时文件下载到本地
		const result2 = await	uni.saveImageToPhotosAlbum({filePath: tempFilePath})
			uni.hideLoading()
			await uni.showToast({
				title: '下载成功',
			})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 头像
	.user_info {
		display: flex;
		padding: 20rpx;

		.user_icon {
			padding: 0 20rpx;

			image {
				width: 88rpx;
				border-radius: 50%;

			}
		}

		.user_desc {

			.user_name {
				color: #808080;
				font-size: 600;
			}

			.user_time {
				padding: 10rpx 0;
				color: #ccc;
				font-size: 24rpx;
			}
		}
	}

	//点赞
	.user_rank {
		display: flex;
		height: 80rpx;
		border-bottom: 5rpx solid #eee;

		.rank {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.iconfont {}
		}

		.user_collect {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {}
		}
	}
.high_img {
	image {
		border-bottom: 1rpx solid #eee;
	}
}
	// 专辑
	.album_wrap {
		padding: 20rpx;

		.album_title {
			padding: 10rpx 0;
		}

		.album_list {
			.album_item {
				display: flex;
				padding: 10rpx 0;
				border-bottom: 10rpx solid #eee;

				.album_cover {
					flex: 1;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}

				.album_info {
					position: relative;
					padding-left: 20rpx;
					flex: 3;

					.album_info_text {
						width: 100rpx;
						height: 50rpx;
						background-color: #d52a7e;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.album_name {
						padding: 10rpx 0;
						color: #888;
					}

					.iconfont {
						position: absolute;
						font-size: 40rpx;
						top: 50%;
						transform: translateY(-50%);
						right: 10%;
						color: #000;
					}
				}
			}
		}
	}

	// 最热评论
	.comment {
		.comment_title {
			padding: 15rpx;

			.iconfont {
				color: red;
				font-size: 40rpx;
			}

			.comment_text {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #666;
			}
		}

		.comment_list {
			.comment_item {
				border-bottom: 15rpx solid #eee;
				//用户信息
				.comment_user {
					display: flex;
					padding: 20rpx 0;
					.user_icon {
						width: 15%;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 90%;
						}
					}

					.user_name {
						flex: 1;
						.user_nickname {
							color: #777;
						}
						.user_time {
							color: #ccc;
							font-size: 24rpx;
							padding: 5rpx 0;
						}
					}
					.user_badge {
						display: flex;
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
				//评论数据
				.comment_desc {
					display: flex;
					padding: 30rpx 0;
					.comment_content {
						flex: 1;
						padding-left: 15%;
						color: #000;
					}
					.comment_like {
						text-align: right;
						.iconfont {
							
						}
					}
				}
			}
		}
	}
	// 最新评论
	.new {
		.icon-icon-pinglun {
			color: aqua!important;
		}			
	}
	// 下载
	.download {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.download_btn {
			width: 90%;
			height: 78%;
			background-color: #D52A7E;
			color: #fff;
			font-size: 50rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
